<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--引入vue相应文件-->
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../elementUI/index.js"></script>
    <!-- 引入docs样式 -->
    <link rel="stylesheet" href="../css/docs.css">
    <!-- 引入博客样式 -->
    <link rel="stylesheet" href="../commonCSS/blog.css">
</head>

<body>
    <div id="app" style="margin:50px;">
        <h1>Link 文字链接</h1>
        <p>文字超链接</p>

        <h2>基础用法</h2>
        <p>基础的文字链接用法。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <div>
                <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
                <el-link type="primary">主要链接</el-link>
                <el-link type="success">成功链接</el-link>
                <el-link type="warning">警告链接</el-link>
                <el-link type="danger">危险链接</el-link>
                <el-link type="info">信息链接</el-link>
            </div>
        </div>
        <br/>
        <br/>



        <h2>禁用状态</h2>
        <p>文字链接不可用状态。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <div>
                <el-link disabled>默认链接</el-link>
                <el-link type="primary" disabled>主要链接</el-link>
                <el-link type="success" disabled>成功链接</el-link>
                <el-link type="warning" disabled>警告链接</el-link>
                <el-link type="danger" disabled>危险链接</el-link>
                <el-link type="info" disabled>信息链接</el-link>
            </div>
        </div>
        <br/>
        <br/>



        <h2>下划线</h2>
        <p>文字链接下划线。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <div>
                <el-link :underline="false">无下划线</el-link>
                <el-link>有下划线</el-link>
            </div>
        </div>
        <br/>
        <br/>



        <h2>图标</h2>
        <p>带图标的文字链接可增强辨识度。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <div>
                <el-link icon="el-icon-edit">编辑</el-link>
                <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
            </div>
        </div>
        <br/>
        <br/>

        <h2>el-link 属性/Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>type</td>
                    <td>类型</td>
                    <td>string</td>
                    <td>primary / success / warning / danger / info</td>
                    <td>default</td>
                </tr>
                <tr>
                    <td>underline</td>
                    <td>是否下划线</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用状态</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>href</td>
                    <td>原生 href 属性</td>
                    <td>string</td>
                    <td>—</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>图标类名</td>
                    <td>string</td>
                    <td>—</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
        <br/>
        <br/>




    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: true
            }
        },
    });
</script>

</html>